<template>
		<view class='drawer-mask' @click="closeDrawer" v-if='isShow'></view>
		<!-- 侧边栏主体 -->
		<view class="drawer-sidebar" :class="[isShow?'enter':'leave']" >
		  <!-- 插槽用于自定义侧边栏内容 -->
		  <slot>
		  </slot>
		</view>
</template>

<script setup>
	import { ref,computed} from 'vue';
	
	// 定义组件属性
	const props = defineProps({
		Fshow: {
			type: Boolean,
			default: false
		},
	})
	const Cshow = ref(!props.Fshow);
	const isShow = computed(()=>{
			return props.Fshow==Cshow.value
		}
	)
	
	// 关闭侧边栏
	const closeDrawer = () => {
	  Cshow.value = !Cshow.value;
	};
	
</script>

<style scoped>

/* 遮罩层样式 */
.drawer-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0.6;
  backdrop-filter: blur(50px); /* 毛玻璃效果 */
  z-index: 9998;
}
/* 侧边栏样式 */
.drawer-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 61.8vw;
  padding:2vw;
  background-color: var(--p-color);
  color: #ffffff;
  transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateX(-100%);
  box-shadow: 0;
  z-index: 9999;
  overflow:hidden; /* 内容超出时可滚动 */
}
.drawer-sidebar.enter{
	transform: translateX(0%);
	box-shadow: 5px 0 50px 15px rgba(0, 0, 0, 0.5);
}
</style>
